/**
 * 页面：系统设置
 * 功能：基础信息（名称/简介/Logo）、安全设置（密码/MFA）、偏好设置（主题/主色/语言/紧凑）、通知设置
 * 交互：保存偏好后写入 localStorage，并分发 'pref:update' 事件用于全局响应
 */
import React from 'react'
import { Card, Row, Col, Form, Input, Select, Switch, Upload, Button, Divider, message } from 'antd'
import { UploadOutlined } from '@ant-design/icons'

function Index() {
  const [form] = Form.useForm()

  const onFinish = (values: any) => {
    message.success('设置已保存')
    // console.log(values)
  }

  return (
    <div style={{ padding: 16, background: 'transparent' }}>
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <Card title="系统设置" bordered style={{ borderRadius: 12 }}>
            <Row gutter={[16, 16]}>
              <Col xs={24} md={12}>
                <Card type="inner" title="基础信息" style={{ borderRadius: 10 }}>
                  <Form form={form} layout="vertical" onFinish={onFinish}>
                    <Form.Item name="name" label="系统名称" rules={[{ required: true, message: '请输入系统名称' }]}> 
                      <Input placeholder="如：数据洞察平台" maxLength={30} />
                    </Form.Item>
                    <Form.Item name="desc" label="简介">
                      <Input.TextArea rows={3} placeholder="一句话描述系统用途" />
                    </Form.Item>
                    <Form.Item label="Logo">
                      <Upload listType="text" maxCount={1}>
                        <Button icon={<UploadOutlined />}>上传 Logo</Button>
                      </Upload>
                    </Form.Item>
                    <Divider style={{ margin: '8px 0 16px' }} />
                    <Form.Item>
                      <Button type="primary" htmlType="submit">保存基础信息</Button>
                    </Form.Item>
                  </Form>
                </Card>
              </Col>

              <Col xs={24} md={12}>
                <Card type="inner" title="安全设置" style={{ borderRadius: 10 }}>
                  <Form layout="vertical">
                    <Form.Item name="pwd" label="修改密码">
                      <Input.Password placeholder="输入新密码" />
                    </Form.Item>
                    <Form.Item name="pwd2" label="确认新密码">
                      <Input.Password placeholder="再次输入新密码" />
                    </Form.Item>
                    <Form.Item name="mfa" label="两步验证">
                      <Switch />
                    </Form.Item>
                    <Button type="primary">更新安全设置</Button>
                  </Form>
                </Card>
              </Col>

              <Col xs={24} md={12}>
                <Card type="inner" title="偏好设置" style={{ borderRadius: 10 }}>
                  <Form layout="vertical" onFinish={(vals)=>{
                    if (vals.theme) localStorage.setItem('pref.themeMode', vals.theme)
                    if (vals.lang) localStorage.setItem('pref.locale', vals.lang)
                    if (vals.primary) localStorage.setItem('pref.primary', vals.primary)
                    window.dispatchEvent(new CustomEvent('pref:update', { detail: vals }))
                    message.success('偏好已应用')
                  }} initialValues={{ theme:'light', lang:'zh-CN', primary:'#3b5bfd' }}>
                    <Form.Item name="theme" label="主题风格">
                      <Select options={[{label:'明亮',value:'light'},{label:'暗色',value:'dark'}]} />
                    </Form.Item>
                    <Form.Item name="primary" label="主题主色">
                      <Input type="color" style={{ width: 80, padding: 0, height: 32 }} />
                    </Form.Item>
                    <Form.Item name="lang" label="界面语言">
                      <Select options={[{label:'简体中文',value:'zh-CN'},{label:'English',value:'en-US'}]} />
                    </Form.Item>
                    <Form.Item name="compact" label="紧凑模式" valuePropName="checked">
                      <Switch />
                    </Form.Item>
                    <Button type="primary" htmlType="submit">保存偏好</Button>
                  </Form>
                </Card>
              </Col>

              <Col xs={24} md={12}>
                <Card type="inner" title="通知设置" style={{ borderRadius: 10 }}>
                  <Form layout="vertical">
                    <Form.Item name="notifyEmail" label="邮箱通知" valuePropName="checked">
                      <Switch />
                    </Form.Item>
                    <Form.Item name="notifySms" label="短信通知" valuePropName="checked">
                      <Switch />
                    </Form.Item>
                    <Form.Item name="notifyLevel" label="告警级别" initialValue="medium">
                      <Select options={[
                        {label:'仅严重',value:'high'},
                        {label:'中及以上',value:'medium'},
                        {label:'全部',value:'all'}
                      ]} />
                    </Form.Item>
                    <Button type="primary">保存通知</Button>
                  </Form>
                </Card>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
    </div>
  )
}

export default Index
